<!-- 搜索页面歌曲的展示组件 -->
<template>
  <div class="m-sglst">
    <div @click="playSong(item.id, item.fee)" class="m-sgitem" v-for="item in songslist" :key="item.id">
      <div class="sgfr f-bd f-bd-btm">
        <div class="sgchfl">
          <div class="f-thide sgtl" :style="item.fee == 0 ? 'color: #ccc' : ''" v-html="keySign(item.name, item.fee)"></div>
          <div class="f-thide sginfo" :style="item.fee == 0 ? 'color: #ccc' : ''">
            <i class="u-hmsprt sghot" v-if="item.sq"></i>
            <span v-html="keySign(singer(item.ar), item.fee)"></span>
            <span v-if="item.al.name">-</span>
            <span v-html="keySign(item.al.name, item.fee)"></span>
          </div>
        </div>
        <div class="sgchfr">
          <span class="u-hmsprt sgchply"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { singer, playSong } from '@/utils/dedicated'
export default {
  props: {
    // 歌单列表
    songslist: {
      type: Array,
      default: () => [],
    },
    // 输入框的值
    values: {
      type: String,
      default: '',
    },
  },
  computed: {
    //名字间隔符
    singer,
  },
  methods: {
    // 歌曲播放限制
    playSong,
    //选中字体变色
    keySign(val, fee) {
      if (fee == 0) {
        return val
      }
      let s = this.values //关键字
      var str = val //将要修改的文本
      //去空格/用,隔开
      let inputvalue = s.replace(/\ +/g, ',') //把空格分开的字符串转换以逗号隔开
      let keyWordArr2 = inputvalue.split(',') //把字符串分割转换成数组
      //判断文本段落(原文本)是否为空
      if (str && str != '') {
        //遍历分割后的字符串
        keyWordArr2.forEach((e) => {
          let regStr = '' + `(${e})`
          let reg = new RegExp(regStr, 'g')
          //如果匹配成功则抛出关键字DOM
          str = str.replace(reg, '<span style="color:#507daf;">' + e + '</span>')
        })
      }
      return str
    },
  },
}
</script>

<style lang="scss" scoped>
.m-sglst {
  position: relative;
  .m-sgitem {
    display: flex;
    padding-left: 10px;
    .sgfr {
      flex: 1 1 auto;
      display: flex;
      position: relative;
    }
    .sgchfl {
      padding: 6px 0;
      width: 0;
      flex: 1 1 auto;
      .f-thide {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
      }
    }
    .sgchfr {
      display: flex;
      align-items: center;
      padding: 0 10px;
    }
    .f-bd-btm {
      border-bottom: 1px solid rgba(226, 226, 227);
    }
    .f-bd:after {
      position: absolute;
      z-index: 2;
      content: '';
      top: 0;
      left: 0;
      pointer-events: none;
      box-sizing: border-box;
      transform-origin: top left;
      border: 0 solid rgba(0, 0, 0, 0.1);
    }
    .sgtl {
      font-size: 17px;
      color: #333;
    }
    .sginfo {
      font-size: 12px;
      color: #888;
    }
    .sghot {
      display: inline-block;
      width: 12px;
      height: 8px;
      margin-right: 4px;
    }
    .sgchply {
      display: inline-block;
      width: 22px;
      height: 22px;
      background-position: -24px 0;
    }
  }
  .u-hmsprt {
    background: url('../assets/home/sq-bofang.png') no-repeat;
    background-size: 166px 97px;
  }
}
</style>
